{% extends 'base_blog.html' %}
{% load bootstrap3 %}

{% block title %} {{ blog.title }} {% endblock %}

{% block blog_list %}
<div>

  <h2 class="page-header">{{ blog.title }}</h2>

  <div class="row" style="padding-top: 5px;">
    <!-- categories -->
    <div class="col-md-9">
      <div class="text-left">
        {% for tag in blog.tag.all %}
          {% if tag.tag_name %}
            <a href="{% url 'blog:category' username tag.tag_name %}" class="btn btn-sm btn-default">{{ tag.tag_name }}</a>
          {% endif %}
        {% endfor %}
      </div>
    </div>
    <!-- created time -->
    <div class="col-md-3">
      <div class="text-right">
        <p class="text-muted"> {{ blog.created_time|date:"M. j, Y, H:i:s" }} </p>
      </div>
    </div>
  </div>

  {{ blog.content|safe }}

  <br>

  <div class="row"><br><br></div>

  <div class="row">
    <div class="pull-right">
      <div class="btn-group">
        <a href="{% url 'blog:blog' username %}" class="btn btn-primary" role="button">{% bootstrap_icon "chevron-left" %} Back</a>
        {% if user_self %}
          <a href="{% url 'blog:edit' username blog.pk %}" class="btn btn-primary" role="button">{% bootstrap_icon "edit" %} Edit</a>
        {% endif %}
      </div>
    </div>
  </div><br><br>

  <div class="row">
    {% if last %}
      <a class="pull-left" href="{% url 'blog:view' username last.pk %}">{% bootstrap_icon "chevron-left" %} {{ last.title }}</a>
    {% else %}
      <p class="text-muted pull-left">{% bootstrap_icon "chevron-left" %} 已是第一篇</p>
    {% endif %}
    {% if next %}
      <a class="pull-right" href="{% url "blog:view" username next.pk %}">{{ next.title }} {% bootstrap_icon "chevron-right" %}</a>
    {% else %}
      <p class="text-muted pull-right">已是最后一篇 {% bootstrap_icon "chevron-right" %}</p>
    {% endif %}
  </div>
</div>
{% endblock %}